<!--财务信息汇总-->
<template>
  <div class="finance-global-page">
    <el-card shadow="always">
      <div slot="header" class="clearfix">
        <line-header
          title="平台充值总额"
        ></line-header>
      </div>
      <div class="card-body-box">
        <el-row>
          <el-col :span="5">
            <div class="top-content-box">
              <div
                class="left-line-box"
                :style="`background:${colors[0]}`"
              ></div>
              <div class="show-content-box">
                <div class="title-box">总计充值金额</div>
                <div class="number-box">￥{{ ((globalData.ALInAmount+globalData.WXInAmount)*0.01).toFixed(2) }}</div>
              </div>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="top-content-box">
              <div
                class="left-line-box"
                :style="`background:${colors[1]}`"
              ></div>
              <div class="show-content-box">
                <div class="title-box">支付宝充值金额</div>
                <div class="number-box">￥{{ ((globalData.ALInAmount)*0.01).toFixed(2) }}</div>
              </div>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="top-content-box">
              <div
                class="left-line-box"
                :style="`background:${colors[2]}`"
              ></div>
              <div class="show-content-box">
                <div class="title-box">微信充值金额</div>
                <div class="number-box">￥{{ ((globalData.WXInAmount)*0.01).toFixed(2) }}</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <el-card shadow="always" style="margin: 2rem 0;">
      <div slot="header" class="clearfix">
        <line-header
          title="发票信息"
        ></line-header>
      </div>
      <div class="card-body-box">
        <el-row>
          <el-col :span="5">
            <div class="top-content-box">
              <div
                class="left-line-box"
                :style="`background:${colors[0]}`"
              ></div>
              <div class="show-content-box">
                <div class="title-box">已开发票金额</div>
                <div class="number-box">￥{{ ((globalData.invoiceAmount)*0.01).toFixed(2) }}</div>
              </div>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="top-content-box">
              <div
                class="left-line-box"
                :style="`background:${colors[1]}`"
              ></div>
              <div class="show-content-box">
                <div class="title-box">可开发票金额</div>
                <div class="number-box">￥{{ ((globalData.validInvoiceAmount)*0.01).toFixed(2)  }}</div>
              </div>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="top-content-box">
              <div
                class="left-line-box"
                :style="`background:${colors[2]}`"
              ></div>
              <div class="show-content-box">
                <div class="title-box">增值税普通发票金额</div>
                <div class="number-box">￥{{ ((globalData.invoiceNormalAmount)*0.01).toFixed(2)  }}</div>
              </div>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="top-content-box">
              <div
                class="left-line-box"
                :style="`background:${colors[2]}`"
              ></div>
              <div class="show-content-box">
                <div class="title-box">增值税专用发票金额</div>
                <div class="number-box">￥{{ ((globalData.invoiceSpecialAmount)*0.01).toFixed(2)  }}</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <el-card shadow="always">
      <div slot="header" class="clearfix">
        <line-header
          title="优惠券信息"
        ></line-header>
      </div>
      <div class="card-body-box">
        <el-row>
          <el-col :span="6">
            <div class="top-content-box">
              <div
                class="left-line-box"
                :style="`background:${colors[0]}`"
              ></div>
              <div class="show-content-box">
                <div class="title-box">已发优惠券</div>
                <div class="number-box">{{ globalData.allCount }}张</div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="top-content-box">
              <div
                class="left-line-box"
                :style="`background:${colors[1]}`"
              ></div>
              <div class="show-content-box">
                <div class="title-box">已发优惠券金额</div>
                <div class="number-box">￥{{ ((globalData.allAmount)*0.01).toFixed(2) }}</div>
              </div>
            </div>
          </el-col>

        </el-row>
        <el-row style="margin-top: 2rem;">
          <el-col :span="6">
            <div class="top-content-box">
              <div
                class="left-line-box"
                :style="`background:${colors[2]}`"
              ></div>
              <div class="show-content-box">
                <div class="title-box">已使用优惠券</div>
                <div class="number-box">
                  <span>{{ globalData.usedCount }}张</span>
                  <span> ￥{{ ((globalData.usedAmount)*0.01).toFixed(2)  }}</span>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="top-content-box">
              <div
                class="left-line-box"
                :style="`background:${colors[0]}`"
              ></div>
              <div class="show-content-box">
                <div class="title-box">未使用优惠券</div>
                <div class="number-box">
                  <span>{{ globalData.pendingCount }}张</span>
                  <span> ￥{{ ((globalData.pendingAmount)*0.01).toFixed(2)  }}</span>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="top-content-box">
              <div
                class="left-line-box"
                :style="`background:${colors[0]}`"
              ></div>
              <div class="show-content-box">
                <div class="title-box">已过期优惠券</div>
                <div class="number-box">
                  <span>{{ globalData.expireCount }}张</span>
                  <span> ￥{{ ((globalData.expireAmount)*0.01).toFixed(2)  }}</span>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
  import lineHeader from "@/components/line-header/index";
  import {mapGetters} from "vuex"
  import {sum_global} from "../../../api/summary"
  import {trace} from "../../../utils/trace"

  export default {
    components: { lineHeader },
    props: {},
    data() {
      return {
        globalData:{},
        colors:[
          "linear-gradient(0deg,#202020 0%,#1b3bff 0%,#ffffff 100%)",
          "linear-gradient(0deg, #FFB128 0%, #FFFFFF 100%);",
          "linear-gradient(0deg, #FF1F34 0%, #FFFFFF 100%);",
        ]

      };
    },
    filters: {

    },
    watch: {},
    computed: {
      ...mapGetters([
        'userInfo',
      ])
    },
    methods: {
    },
    async created() {
      let res = await sum_global();

      if(res.code==2000){
        this.globalData = res.data;
      }
    },
    mounted() {}
  };
</script>
<style lang="scss" scoped>


  .card-body-box {
    margin: 20px 0;
    .top-content-box {
      display: flex;
      align-items: center;
      .left-line-box {
        width: 7px;
        height: 70px;
        border-radius: 3px;
      }
      .show-content-box {
        margin-left: 18px;
        .title-box {
          font-size: 16px;
          font-weight: 400;
        }
        .number-box {
          margin-top: 15px;
          font-size: 30px;
          font-weight: 400;
        }
      }
    }
  }
</style>
